<template>
  <!-- 是答题卡的那个小方块，当用户完成了就深色，没完成就浅色，然后有一个序号 -->
  <div class="topic-box" :class="status" @click="navigateToThisTopic">
    {{ order }}
  </div>
</template>

<script>
export default {
  name: "TopicSquare",
  props: [
    "order",
    "tid",
    "choice",
    "isWatching",
    "scrollByIndex",
    "changeWatchingIndex",
  ],
  computed: {
    status() {
      if (this.isWatching) {
        return "looking";
      } else if (this.choice === undefined) {
        return "undo";
      } else {
        return "done";
      }
    },
  },
  methods: {
    navigateToThisTopic() {
      // 可以拿到index，根据index让父组件去让el-main。
      // const container = document.querySelector(".el-main");
      this.scrollByIndex(this.order - 1);
      this.changeWatchingIndex(this.order - 1);
    },
  },
};
</script>

<style lang='less' scoped>
.topic-box {
  //   display: block;
  width: 32px;
  height: 32px;
  //   border: 1px solid #000;
  border: solid #3a8bff 1px;
  border-radius: 5px;
  text-align: center;
  line-height: 32px;
  cursor: pointer;
  color: #6ba9ff;
  text-decoration: none;
}
.undo {
  background-color: #fff;
}
.done {
  background-color: #bfdaff;
}
.looking {
  color: #fff;
  background-color: #3a8bff;
}
</style>